<ix-page-header pageTitle="NVME-oF">
  <button
    mat-button
    color="default"
    ixTest="global-configuration"
    [ixUiSearch]="searchableElements.elements.config"
    (click)="openGlobalConfiguration()"
  >{{ 'Global Configuration' | translate }}</button>

  <button
    *ixRequiresRoles="requiredRoles"
    mat-button
    color="primary"
    ixTest="add-subsystem"
    (click)="addSubsystem()"
  >
    {{ 'Add Subsystem' | translate }}
  </button>
</ix-page-header>

@let subsystem = dataProvider().expandedRow;
@let showDetails = !masterList.filterString || subsystem.name.toLowerCase().includes(masterList.filterString.toLowerCase());

<ix-master-detail-view
  #masterDetailView="masterDetailViewContext"
  [selectedItem]="subsystem"
  [showDetails]="showDetails"
>
  <ix-subsystems-list
    #masterList
    master
    [dataProvider]="dataProvider()"
    [isMobileView]="masterDetailView.isMobileView()"
    (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
    (search)="onFilter($event)"
  ></ix-subsystems-list>

  <div detail-header class="detail-header">
    @if (subsystem) {
      <ix-subsystems-details-header
        [subsystem]="subsystem"
        (subsystemRemoved)="onSubsystemRemoved()"
      ></ix-subsystems-details-header>
    }
  </div>

  <ng-container detail>
    @if (subsystem) {
      <ix-subsystem-details [subsystem]="subsystem"></ix-subsystem-details>
    }
  </ng-container>
</ix-master-detail-view>
